import React, { PureComponent } from 'react'
import { Form, Button, Select, Input, Divider, Row, Col } from 'antd'
import PropTypes from 'prop-types'

import Style from './goodsInfo.css'

const { Option } = Select
const { TextArea } = Input

class goodsInfoForm extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      baseType: 1
    }
    this.next = this.next.bind(this)
    this.baseTypeChange = this.baseTypeChange.bind(this)
    this.priceChange = this.priceChange.bind(this)
  }

  next () {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        if (values.autoPutAwayStartTime) {
          values.autoPutAwayStartTime = values.autoPutAwayStartTime.format('YYYY-MM-DD HH:mm:ss')
        }
        if (values.autoPutAwayEndTime) {
          values.autoPutAwayEndTime = values.autoPutAwayEndTime.format('YYYY-MM-DD HH:mm:ss')
        }
        if (values.keys) {
          values.keys = values.keys.split(' ')
        }
        values.price = parseFloat(values.price.replace(/,/g, '')) * 100
        values.autoPutAwayFlag = values.autoPutAwayFlag ? 1 : 0
        console.log('---->>>', values)
        this.props.selectProperty({
          goodsInfo: values
        })
      }
    })
  }

  baseTypeChange (value) {
    this.setState({
      baseType: value
    })
  }

  priceChange (e) {
    const { setFieldsValue } = this.props.form
    const { value } = e.target
    setFieldsValue({
      price: value === 'NaN' ? null : parseFloat(value.replace(/,/g, '')).toLocaleString(),
      integration: value ? Number(value) : null
    })
  }

  render () {
    const { baseType, integration } = this.state
    const { category = {}, authorOptionsList = [], goodsInfo = {}, unitList } = this.props
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 }
    }
    return (
      <div className={Style['goods-info-container']}>
        <Form autoComplete='off' {...formItemLayout} onSubmit={this.handleSubmit}>
          <Form.Item label='基本信息' colon={false} style={{ fontSize: '16px' }} />

          <Form.Item label='商品类别' >
            <span>{category.codePath}</span>
          </Form.Item>
          <Form.Item label='商品名称'>
            {getFieldDecorator('name', {
              initialValue: goodsInfo.name,
              rules: [{ required: true, message: '请输入商品名称!' }]
            })(
              <Input placeholder='请输入商品名称' />
            )}
          </Form.Item>
          <Form.Item label='商品类型'>
            {getFieldDecorator('comType', {
              initialValue: goodsInfo.comType,
              rules: [{ required: true, message: '请选择!' }]
            })(
              <Select placeholder='请选择'>
                {/* <Option value='NEW_PRODUCT'>新品</Option>
                <Option value='HOT_SALE'>热销</Option> */}
                <Option value='PERSONAGE'>人物</Option>
                <Option value='SCENERY'>景物</Option>
                <Option value='STILL_LIFE'>静物</Option>
                <Option value='ABSTRACT_PAINTING'>抽象</Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item label='创作者'>
            {getFieldDecorator('authorId', {
              initialValue: goodsInfo.authorId,
              rules: [
                { required: true, message: '请选择创作者!' }
              ]
            })(
              <Select placeholder='请选择创作者'>
                {
                  authorOptionsList && authorOptionsList.map((item, index) => <Option key={item.value} value={item.value}>{item.text}</Option>
                  )
                }
              </Select>
            )}
          </Form.Item>
          <Form.Item label='商品价格'>
            {getFieldDecorator('price', {
              initialValue: (goodsInfo.price && (goodsInfo.price / 100).toLocaleString()),
              rules: [{ required: true, message: '请输入商品价格!' }, {
                validator: (rule, value, callback) => {
                  if (/^[0-9]+\.?[0-9]{0,2}$/.test(Number(value))) {
                    callback()
                  } else {
                    try {
                      throw new Error('请输入正确的金额（最小精度为分）')
                    } catch (err) {
                      callback(err)
                    }
                  }
                }
              }]
            })(
              <Input placeholder='请输入商品价格' onChange={this.priceChange} />
            )}
          </Form.Item>
          <Form.Item label='商品描述'>
            {getFieldDecorator('profile', {
              initialValue: goodsInfo.profile,
              rules: [{ required: true, message: '请输入商品描述!' }]
            })(
              <TextArea placeholder='请输入商品描述' rows={8} />
            )}
          </Form.Item>
          <Form.Item label='运费模板'>
            {getFieldDecorator('templeteId', {
              initialValue: goodsInfo.templeteId || 'default',
              rules: [
                { required: true, message: '请选择运费模板!' }
              ]
            })(
              <Select placeholder='请选择运费模板'>
                <Option value='default'>默认运费模板</Option>
              </Select>
            )}
          </Form.Item>
          <Divider />
          <Form.Item label='库存信息' colon={false} style={{ fontSize: '16px' }} />
          <Form.Item label='基本类型'>
            {getFieldDecorator('baseType', {
              initialValue: goodsInfo.baseType || 1,
              rules: [{ required: true, message: '请选择' }]
            })(
              <Select placeholder='请选择' onChange={this.baseTypeChange}>
                <Option value={1}>作品</Option>
                <Option value={2}>标品</Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item label='商品库存' help='改设置只对单品有效，库存数值取决于货品数量'>
            {getFieldDecorator('stock', {
              initialValue: goodsInfo.stock || 1,
              rules: [{ required: true, message: '请输入库存!' }]
            })(
              baseType === 1 ? <Select>
                <Option value={0}>0</Option>
                <Option value={1}>1</Option>
              </Select> : <Input placeholder='请输入库存' />
            )}
          </Form.Item>
          {
            baseType !== 1 && <>
              <Form.Item label='库存预警值'>
                {getFieldDecorator('stockWarning', {
                  initialValue: goodsInfo.stockWarning

                })(
                  <Input placeholder='请输入库存预警值' />
                )}
              </Form.Item>
              <Form.Item label='计量单位'>
                {getFieldDecorator('unit', {
                  initialValue: goodsInfo.unit
                })(
                  <Input placeholder='请输入计量单位' />
                )}
              </Form.Item>
            </>
          }
          <Form.Item label='商品重量'>
            <Row gutter={24}>
              <Col span={17}>
                <Form.Item>
                  {getFieldDecorator('weight', {
                    initialValue: goodsInfo.weight

                  })(
                    <Input placeholder='请输入商品重量' />
                  )}
                </Form.Item>
              </Col>
              <Col span={7}>
                <Form.Item>
                  {getFieldDecorator('weightUnit', {
                    initialValue: goodsInfo.weightUnit

                  })(
                    <Select placeholder='请选择'>
                      {
                        unitList && unitList.map((item, index) => <Option value={item.key} key={index}>{item.value}</Option>)
                      }
                    </Select>
                  )}
                </Form.Item>
              </Col>
            </Row>
          </Form.Item>
          <Divider />

          <Form.Item label='其他信息' colon={false} style={{ fontSize: '16px' }} />
          <Form.Item label='赠送积分' help='积分=商品价格'>
            {getFieldDecorator('integration', {
              initialValue: goodsInfo.integration || integration,
              rules: [{ required: true, message: '请输入赠送积分!' }]
            })(
              <Input placeholder='请输入' disabled />
            )}
          </Form.Item>
          {/* <Form.Item label='商品上架'>
            {getFieldDecorator('autoPutAwayFlag', {
              valuePropName: 'checked',
              initialValue: goodsInfo.autoPutAwayFlag === 1,
              rules: [
                { required: true, message: '请选择是否上架!' }
              ]
            })(<Switch />)}
          </Form.Item>
          <Form.Item label='商品上架时间'>
            {getFieldDecorator('autoPutAwayStartTime', {
              initialValue: goodsInfo.autoPutAwayStartTime,
              rules: [{ required: true, message: '请选择商品上架时间!' }]
            })(
              <DatePicker />
            )}
          </Form.Item>
          <Form.Item label='商品下架时间' help='默认下架时间360天'>
            {getFieldDecorator('autoPutAwayEndTime', {
              initialValue: goodsInfo.autoPutAwayEndTime
            })(
              <DatePicker />
            )}
          </Form.Item> */}
          <Form.Item label='服务保证' >
            <span>7天无理由退货 免费包邮</span>
          </Form.Item>

          <Form.Item label='商品关键词' help='商品关键词请用空格分离；有两个功能，一是可以作为站内关键词查询，在前台搜索框输入关键词后，能够搜索到该商品；二是作为搜索引擎收录使用'>
            {getFieldDecorator('keys', {
              initialValue: goodsInfo.keys && goodsInfo.keys.join(',')
            })(
              <TextArea placeholder='请输入商品关键词' rows={8} />
            )}
          </Form.Item>
          <Form.Item label='商品备注'>
            {getFieldDecorator('memo', {
              initialValue: goodsInfo.memo
            })(
              <TextArea placeholder='请输入商品备注' rows={8} />
            )}
          </Form.Item>
          <Form.Item wrapperCol={{ span: 12, offset: 9 }}>
            <Button type='primary' ghost onClick={this.props.selectCategory}>
              上一步，选择商品分类
            </Button>
            <Button type='primary' style={{ marginLeft: '20px' }} onClick={this.next}>
              下一步，填写商品属性
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}

goodsInfoForm.propTypes = {
  stepChange: PropTypes.func,
  form: PropTypes.any,
  goodsInfo: PropTypes.any
}

const goodsInfo = Form.create()(goodsInfoForm)
export default goodsInfo
